<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Naive Beyes 决策</title>
    <link rel="shortcut icon" href="favicon.ico">
	<link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <link href="/static/admin/css/animate.min.css" rel="stylesheet">
    <link href="/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">
    <script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>
    <style type="text/css">
        .row{
            padding: 5px;
            margin-bottom: 5px;
        }
        .control-label{
            width: 35%;
            font-size: 16px;
            line-height: 35px;
            text-align: right;
        }
        .form{
            width: 400px;
            margin: 0 auto;
        }
        .form-control{
            width: 60%;
            float:right;
        }
        .radio-inline input[type=radio] {
            margin-top: 4px;
        }
        .info{
            font-size: 16px;
            color:#3D3E3F;
        }
        #nope{
            height: 0;
            overflow: hidden;
        }
        .box {
            width: 500px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="container">
    <h1 class="text-center">朴素贝叶斯决策--根据你的特征预测你求婚能否成功</h1>
    <div class="row text-center">
        <button class="btn btn-success" id="setData">添加500条统计数据（纯随机）</button>
        <button class="btn btn-danger" id="delData">清空数据</button>
    </div>
    <div class="row">
        <form class="form" id="Form" action="" method="post">
            <div class="form-group">
                <label class="control-label">身高(cm)</label>
                <input type="number" class="form-control"  name="tall" value="180" required>
            </div>
            <div class="form-group">
                <label class="control-label">体重(kg)</label>
                <input type="number" class="form-control"  name="weight" value="65" required>
            </div>
            <div class="form-group">
                <label class="control-label">月收入￥</label>
                <input type="number" class="form-control"  name="income" value="7500" required>
            </div>
            <div class="form-group">
                <label class="control-label">是否英俊</label>
                <select class="form-control" name="handsome">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">是否有房</label>
                <select class="form-control" name="house">
                    <option value="1">是</option>
                    <option value="0" selected>否</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">是否有车</label>
                <select class="form-control" name="car">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">性格好坏</label>
                <select class="form-control" name="kind">
                    <option value="1">好</option>
                    <option value="0">坏</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">是否勤快</label>
                <select class="form-control" name="industrious">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">女生身高</label>
                <select class="form-control" name="female_tall_step">
                    <option value="1">小于150cm</option>
                    <option value="2">150~155cm</option>
                    <option value="3">155~160cm</option>
                    <option value="4" selected>160~165cm</option>
                    <option value="5">165~170cm</option>
                    <option value="6">170~175cm</option>
                    <option value="7">大于175cm</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">女生收入</label>
                <select class="form-control" name="female_income_step">
                    <option value="1">小于3k</option>
                    <option value="2">3~5k</option>
                    <option value="3" selected>5~7k</option>
                    <option value="4">7~10k</option>
                    <option value="5">10~15k</option>
                    <option value="6">15~20k</option>
                    <option value="7">大于20k</option>
                </select>
            </div>
            <div class="form-group text-center">
                <button type="submit" class="btn btn-info">提交</button>
            </div>
        </form>
    <div class="box">
        <canvas id="myChart"></canvas>
    </div>
    <P class="info" id="suggest"></P>
    <P class="info" id="info"></P>
    <P class="info" id="notinfo"></P>
    <P class="info" id="ps"></P>
    <p class="info" id="extra1"></p>
    <p class="info" id="extra2"></p>
    <p class="info" id="extra3"></p>
    </div>
    </div>
</body>
<script type="text/javascript">
$(function(){
    $("#setData").on('click',function(){
        $.post("index/index/setData",{},function(res){
            alert(res.msg)
        });
    });

    $("#delData").on('click',function(){
        $.post("index/index/delData",{},function(res){
            alert(res.msg)
        });
    });

    $("#Form").on('submit',function(){
        var param = $("#Form").serialize();
        $.post('index/index/getIsMarry',param,function(res){
            if(res.code == -1){
                alert(res.msg);
            }else{
                if(res.code == 1){
                    $("#suggest").css({'color':'blue'});
                }else{
                    $("#suggest").css({'color':'red'});
                }
                $("#suggest").html("【结论】"+res.suggest);
                $("#info").html("P(求婚成功 | 特征向量与你相同)="+res.msg+"%");
                $("#notinfo").html("P(求婚失败 | 特征向量与你相同)="+res.data.PnotAB+"%");
                $("#extra1").html("P(求婚成功)="+res.data.PA+"%");
                $("#extra2").html("P(特征向量与你相同 | 求婚成功)="+res.data.PBA+"%");
                $("#extra3").html("P(特征向量与你相同)="+res.data.PB+"%");
                $("#ps").html(res.ps);
                var option = {
                    'PA':res.msg*10,
                    'PB':res.data.PnotAB*10,
                    'PAname':'成功',
                    'PBname':'失败',
                    'width':500,
                    'height':500,
                    'style':{
                        'border':'1px solid #333'
                    }
                }
                ZR("#myChart").PAB(option);
            }
        });
        return false;
    });
})
</script>
<script>
    var ZR = function(el){
    var obj = '';
    var id = /#(.*)/;
    if(id.test(el)){
        var name = el.substr(1,el.length);
        obj = document.getElementById(name);
        oJQ = $(el);
    }
    return {
        PAB:function(option){
            oJQ.attr({'width':option.width,'height':option.height});
            oJQ.css(option.style);
            var ctx=obj.getContext("2d");
            if(option.width < 500){
                option.width = 500;
            }
            if(option.height < 500){
                option.height = 500;
            }
            if(option.PA > option.PB){
                var a = option.PA;
                option.PA = option.PB;
                option.PB = a;
                var b = option.PAname;
                option.PAname = option.PBname;
                option.PBname = b;
            }
            // 坐标轴 和 A = B
            var _X0 = Math.floor(0.2*option.width);
            var _Y0 = Math.floor(0.2*option.height);
            var _Xe = option.width - _X0;
            var _Ye = option.height - _X0;
            var K = (_Ye - _Y0)/(_X0 - _Xe);
            var b = _Ye - K*_X0;
            var _Dx = _Xe - _X0,_Dy = _Ye - _Y0;
            // y = kx +b;
            ctx.moveTo(_X0,_Y0);
            ctx.lineTo(_X0,_Ye);
            ctx.lineTo(_Xe,_Ye);
            ctx.moveTo(_X0,_Ye);
            ctx.lineTo(0.8*_Xe,K*(0.8*_Xe)+b);
            ctx.moveTo(_Xe,_Ye);
            ctx.lineTo(_Xe-5,_Ye-2);
            ctx.moveTo(_Xe,_Ye);
            ctx.lineTo(_Xe-5,_Ye+2);
            ctx.moveTo(_X0,_Y0);
            ctx.lineTo(_X0-2,_Y0+5);
            ctx.moveTo(_X0,_Y0);
            ctx.lineTo(_X0+2,_Y0+5);

            // Y 100% 刻度
            ctx.moveTo(Math.floor(_Dx*0.8)+_X0,_Ye);
            ctx.lineTo(Math.floor(_Dx*0.8)+_X0,_Ye-5);
            // X 100% 刻度
            ctx.moveTo(_X0,_Y0+Math.floor(_Dy*0.2));
            ctx.lineTo(_X0+5,_Y0+Math.floor(_Dy*0.2));
            var Dx=Math.floor(_Dx*0.8),Dy=Math.floor(_Dy*0.8);
            // A的刻度(_X0,A_y)
            var A_y = _Ye-(Dy-Math.floor(Dy*(1-option.PA)));
            ctx.moveTo(_X0,A_y);
            ctx.lineTo(_X0+5,A_y);
            // B的刻度(B_x,_Ye)
            var B_x = _X0 + Math.floor(Dx*option.PB);
            ctx.moveTo(B_x,_Ye);
            ctx.lineTo(B_x,_Ye-5);
            ctx.stroke();
            //PA%虚线
            ctx.setLineDash([4,5]);
            ctx.lineWidth = 1;
            ctx.strokeStyle = '#f36';
            ctx.beginPath();
            ctx.moveTo(_X0,A_y);
            ctx.lineTo(Math.floor(_Dx*0.8)+_X0,A_y);
            ctx.stroke();
            //PB%虚线
            ctx.setLineDash([4,5]);
            ctx.lineWidth = 1;
            ctx.strokeStyle = '#09F';
            ctx.beginPath();
            ctx.moveTo(B_x,_Ye);
            ctx.lineTo(B_x,_Y0+Math.floor(_Dy*0.2));
            ctx.stroke();

            //填充标识
            ctx.font="14px Arial";
            ctx.fillText(option.PAname,_X0-20,_Y0-10);
            ctx.fillText(option.PBname,_Xe-10,_Ye+15);
            ctx.fillText(option.PAname + " = " + option.PBname,0.8*_Xe+10,K*(0.8*_Xe)+b);
            ctx.fillText("",_X0-40,_Y0+Math.floor(_Dy*0.2));
            ctx.fillText("",Math.floor(_Dx*0.8)+_X0,_Ye+20);
            ctx.fillText((option.PA*100).toFixed(2),_X0-30,A_y-5);
            ctx.fillText((option.PB*100).toFixed(2),B_x-20,_Ye+20);
            ctx.fillText("0",_X0-10,_Ye+10);

            // 填充三角形
            ctx.beginPath();
            ctx.moveTo(_X0,_Ye);
            ctx.lineTo(_X0,A_y);
            ctx.lineTo((A_y-b)/K,A_y);
            ctx.fillStyle='rgba(0,0,255,0.4)';
            ctx.fill();

            // 结果
            ctx.fillStyle='#3D3E3F';
            ctx.fillText("P("+option.PAname+">"+option.PBname+") = "+(option.PA/2/option.PB*100).toFixed(2)+"%",25,450);
            ctx.fillText("P("+option.PBname+">"+option.PAname+") = "+(100-option.PA/2/option.PB*100).toFixed(2)+"%",25,480);
        }
    }
}
</script>
</html>
